._txFeeBar
  font-size 17px
  font-weight 400
  display flex
  justify-content center
  align-items center
  border-radius 12px
  display flex
  justify-content center
  align-items center
  -webkit-app-region no-drag
  transition none
  pointer-events auto
  transform translate3d(0, 0, 0)
  font-family 'MainFont'
  padding 0px
  background var(--ghostA)
  margin-top 5px
  cursor pointer
  flex-grow 1

  *
    pointer-events none

  svg
    position relative
    top -0px
    padding 0px 3px 0px 4px

._txFeeGwei
  cursor pointer
  transform translateY(0px)
  display flex
  justify-content center
  align-items center
  padding 20px

  *
    pointer-events none

  ._txFeeGweiValue
    font-weight 300
    font-size 23px
    display flex
    align-items center
    justify-content center
    position relative
    top -1px
    
  ._txFeeGweiLabel
    display flex
    align-items center
    justify-content center
    font-family 'MainFont'
    padding-left 4px
    position relative
    top 0px
    font-weight 500
    font-size 11px
    text-transform uppercase

._txFeeGwei:hover
  // flex 1
  // padding 0px 10px
  // background var(--moon)
  // color var(--moonOver)
  background var(--ghostB)
  // transform translateY(-5px)
  // box-shadow 0px 20px 30px -5px var(--ghostX)
  // border-bottom 1px solid var(--goodDark)
  // animation 4s shake ease-in-out infinite alternate

._txFeeGwei:active
  transform translateY(0px)
  // animation-name shake-little
  // animation-duration 2s
  // animation-timing-function: ease-in-out
  // animation-iteration-count: infinite
  // box-shadow 0px 5px 8px 0px var(--ghostZ)

._txFeeUSDTagValue
  font-size 13px
  font-weight 300

._txFeeValue
  position relative
  display flex
  align-items center
  justify-content center
  font-weight 300
  font-size 14px
  margin-left 10px
  font-size 18px

._txFeeValueDefault
  opacity 1
  display flex
  align-items center
  justify-content center
  font-size 14px
  font-weight 400
  span
    padding 4px

  .displayValueFiat, .displayValueMain
    padding 1px
    
  ._txFeeValueCurrency
    color var(--mint)
    font-size 10px
    font-weight 600

._txFeeValueDefaultWarn
  color var(--bad)

._txFeeValueHover
  position absolute
  opacity 0
  top 0
  left 0
  bottom 0
  right 0
  display flex
  align-items center
  justify-content center

._txFeeETH
  padding-right 6px
  opacity 1
  font-family 'MainFont'

._txFeeETHValue
  padding-right 0px
  font-size 18px

._txFeeUSD
  font-weight 300
  position relative
  font-size 13px

._txFeeUSDSymbol
  font-size 11px

._txFeeUSDDescription
  position relative
  font-size 11px
  font-family 'MainFont'
  padding-left 2px

._txFeeEq
  font-size 15px
  padding 0px 8px 0px 0px
  display none


._txFeeValueDefault:hover
  opacity 0

// ._txFeeValueHover:hover
//   opacity 1

._txFeeBar:hover
  background var(--ghostB)      

@keyframes wavey
  0%
    -webkit-transform rotate(0deg)
    transform rotate(0deg)

  100%
    -webkit-transform rotate(360deg)
    transform rotate(360deg)

// @keyframes shake 
//   0% 
//     transform translate3d(0px, 0px, 0)
//   25% 
//     transform translate3d(-1px, -1px, 0)
//   50% 
//     transform translate3d(1px, 1px, 0)
//   75% 
//     transform translate3d(-1px, 0px, 0) rotate(1deg)
//   100% 
//     transform translate3d(1px, -2px, 0) rotate(-1deg)


@keyframes shake-little 
  2% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  4% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  6% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  8% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  10% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  12% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  14% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  16% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  18% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  20% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  22% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  24% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  26% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  28% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  30% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  32% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  34% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  36% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  38% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  40% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  42% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  44% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  46% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  48% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  50% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  52% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  54% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  56% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  58% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  60% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  62% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  64% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  66% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  68% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  70% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  72% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  74% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  76% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  78% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  80% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  82% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  84% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  86% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  88% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  90% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  92% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  94% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  96% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  98% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  0%, 100% 
    transform: translate(0, 0) rotate(0)  






// .shake-little:hover,
// .shake-trigger:hover .shake-little, .shake-little.shake-freeze, .shake-little.shake-constant 
//   animation-name: shake-little
//   animation-duration: 100ms
//   animation-timing-function: ease-in-out
//   animation-iteration-count: infinite 


// .flip
//   position absolute
//   top 0
//   left 0
//   // width 160px
//   // height 30px
//   perspective 500px
//   // top 50%
//   // left 50%
//   // margin -24px 0 0 -80px
//   a
//     font-weight 400
//     text-transform uppercase
//     margin 0
//     padding 0
//     width 100%
//     height 100%
//     position absolute
//     transform-style preserve-3d
//     // transform translateZ(-16px)
//     transition transform 0.3s
//     cursor pointer
//     .front,
// 		.back
//       margin 0
//       width 160px
//       height 30px
//       line-height 30px
//       position absolute
//       text-align center
//       letter-spacing .4em
//     .front
//       background-color #222
//       color #fff
//       transform rotateY(0) translateZ(24px)
//     .back
//       background-color rgba(white,.0)
//       color rgba(#222,.0)
//       transform rotateX(90deg) translateZ(24px)
//       overflow hidden
//       &:after
//         content ''
//         position absolute
//         top -32%
//         left -10%
//         width 120%
//         height 50%
//         background #222
//         transform rotate(8deg)
//         transition all .5s ease
//         transition-delay .15s
//     &:hover
//       transform translateZ(-24px) rotateX(-90deg)
//       .front
//         background black
//         transition all .8s ease
//       .back
//         color #222
//         transition color .4s linear
//         background white
//         &:after
//           transform rotate(6deg) translate(100px,-18px)
